<!DOCTYPE html>
<html lang="en">
<head>
    
    <meta charset="utf-8">
    <title>packages/my-map-marker/Marker.vue - Documentation</title>
    
    
    <script src="scripts/prettify/prettify.js"></script>
    <script src="scripts/prettify/lang-css.js"></script>
    <link type="text/css" rel="stylesheet" href="styles/prettify.css">
    <link type="text/css" rel="stylesheet" href="styles/jsdoc.css">
    <script src="scripts/nav.js" defer></script>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>

<input type="checkbox" id="nav-trigger" class="nav-trigger" />
<label for="nav-trigger" class="navicon-button x">
  <div class="navicon"></div>
</label>

<label for="nav-trigger" class="overlay"></label>

<nav >
    
    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="ol.interaction.areaSelect.html">areaSelect</a></li><li><a href="ol.interaction.drag.html">drag</a></li><li><a href="ol.source.TileSuperMapRest.html">TileSuperMapRest</a><ul class='methods'><li data-type='method'><a href="ol.source.TileSuperMapRest.html#.createTileGrid">createTileGrid</a></li><li data-type='method'><a href="ol.source.TileSuperMapRest.html#.optionsFromMapJSON">optionsFromMapJSON</a></li><li data-type='method'><a href="ol.source.TileSuperMapRest.html#changeTilesVersion">changeTilesVersion</a></li><li data-type='method'><a href="ol.source.TileSuperMapRest.html#createLayerUrl">createLayerUrl</a></li><li data-type='method'><a href="ol.source.TileSuperMapRest.html#getAllRequestParams">getAllRequestParams</a></li><li data-type='method'><a href="ol.source.TileSuperMapRest.html#getFullRequestUrl">getFullRequestUrl</a></li><li data-type='method'><a href="ol.source.TileSuperMapRest.html#getRequestParamString">getRequestParamString</a></li><li data-type='method'><a href="ol.source.TileSuperMapRest.html#lastTilesVersion">lastTilesVersion</a></li><li data-type='method'><a href="ol.source.TileSuperMapRest.html#mergeTileVersionParam">mergeTileVersionParam</a></li><li data-type='method'><a href="ol.source.TileSuperMapRest.html#nextTilesVersion">nextTilesVersion</a></li><li data-type='method'><a href="ol.source.TileSuperMapRest.html#setTileSetsInfo">setTileSetsInfo</a></li><li data-type='method'><a href="ol.source.TileSuperMapRest.html#updateCurrentTileSetsIndex">updateCurrentTileSetsIndex</a></li></ul></li></ul><h3>Modules</h3><ul><li><a href="module-$ui_map_mixins_feature.html">$ui/map/mixins/feature</a><ul class='methods'><li data-type='method'><a href="module-$ui_map_mixins_feature.html#~draw">draw</a></li><li data-type='method'><a href="module-$ui_map_mixins_feature.html#~modify">modify</a></li><li data-type='method'><a href="module-$ui_map_mixins_feature.html#~setStyle">setStyle</a></li></ul></li><li><a href="module-$ui_map_mixins_image.html">$ui/map/mixins/image</a></li><li><a href="module-$ui_map_mixins_stroke.html">$ui/map/mixins/stroke</a></li><li><a href="module-$ui_map_my-draw.html">$ui/map/my-draw</a><ul class='methods'><li data-type='method'><a href="module-$ui_map_my-draw.html#~clear">clear</a></li><li data-type='method'><a href="module-$ui_map_my-draw.html#~draw">draw</a></li><li data-type='method'><a href="module-$ui_map_my-draw.html#~finish">finish</a></li><li data-type='method'><a href="module-$ui_map_my-draw.html#~getFeatures">getFeatures</a></li><li data-type='method'><a href="module-$ui_map_my-draw.html#~modify">modify</a></li><li data-type='method'><a href="module-$ui_map_my-draw.html#~removeFeature">removeFeature</a></li></ul></li><li><a href="module-$ui_map_my-map.html">$ui/map/my-map</a><ul class='methods'><li data-type='method'><a href="module-$ui_map_my-map.html#~addFeature">addFeature</a></li><li data-type='method'><a href="module-$ui_map_my-map.html#~clickTrigger">clickTrigger</a></li><li data-type='method'><a href="module-$ui_map_my-map.html#~dispose">dispose</a></li><li data-type='method'><a href="module-$ui_map_my-map.html#~getFeatureAtPixel">getFeatureAtPixel</a></li><li data-type='method'><a href="module-$ui_map_my-map.html#~getFeatureVM">getFeatureVM</a></li><li data-type='method'><a href="module-$ui_map_my-map.html#~getLayer">getLayer</a></li><li data-type='method'><a href="module-$ui_map_my-map.html#~getMetersPerUnit">getMetersPerUnit</a></li><li data-type='method'><a href="module-$ui_map_my-map.html#~mapReady">mapReady</a></li><li data-type='method'><a href="module-$ui_map_my-map.html#~moveTo">moveTo</a></li><li data-type='method'><a href="module-$ui_map_my-map.html#~removeFeature">removeFeature</a></li><li data-type='method'><a href="module-$ui_map_my-map.html#~resize">resize</a></li><li data-type='method'><a href="module-$ui_map_my-map.html#~setActive">setActive</a></li><li data-type='method'><a href="module-$ui_map_my-map.html#~setCursor">setCursor</a></li><li data-type='method'><a href="module-$ui_map_my-map.html#~zoomIn">zoomIn</a></li><li data-type='method'><a href="module-$ui_map_my-map.html#~zoomOut">zoomOut</a></li><li data-type='method'><a href="module-$ui_map_my-map.html#~zoomTo">zoomTo</a></li></ul></li><li><a href="module-$ui_map_my-map-circle.html">$ui/map/my-map-circle</a></li><li><a href="module-$ui_map_my-map-cluster.html">$ui/map/my-map-cluster</a><ul class='methods'><li data-type='method'><a href="module-$ui_map_my-map-cluster.html#~clear">clear</a></li><li data-type='method'><a href="module-$ui_map_my-map-cluster.html#~draw">draw</a></li></ul></li><li><a href="module-$ui_map_my-map-flight.html">$ui/map/my-map-flight</a></li><li><a href="module-$ui_map_my-map-geo.html">$ui/map/my-map-geo</a></li><li><a href="module-$ui_map_my-map-heat.html">$ui/map/my-map-heat</a></li><li><a href="module-$ui_map_my-map-html.html">$ui/map/my-map-html</a></li><li><a href="module-$ui_map_my-map-icon.html">$ui/map/my-map-icon</a></li><li><a href="module-$ui_map_my-map-image.html">$ui/map/my-map-image</a></li><li><a href="module-$ui_map_my-map-layers.html">$ui/map/my-map-layers</a></li><li><a href="module-$ui_map_my-map-line.html">$ui/map/my-map-line</a></li><li><a href="module-$ui_map_my-map-link.html">$ui/map/my-map-link</a></li><li><a href="module-$ui_map_my-map-marker.html">$ui/map/my-map-marker</a></li><li><a href="module-$ui_map_my-map-measure.html">$ui/map/my-map-measure</a><ul class='methods'><li data-type='method'><a href="module-$ui_map_my-map-measure.html#~clear">clear</a></li></ul></li><li><a href="module-$ui_map_my-map-overview.html">$ui/map/my-map-overview</a></li><li><a href="module-$ui_map_my-map-palette.html">$ui/map/my-map-palette</a></li><li><a href="module-$ui_map_my-map-panel.html">$ui/map/my-map-panel</a></li><li><a href="module-$ui_map_my-map-placement.html">$ui/map/my-map-placement</a></li><li><a href="module-$ui_map_my-map-pointer.html">$ui/map/my-map-pointer</a></li><li><a href="module-$ui_map_my-map-polygon.html">$ui/map/my-map-polygon</a></li><li><a href="module-$ui_map_my-map-popup.html">$ui/map/my-map-popup</a></li><li><a href="module-$ui_map_my-map-rectangle.html">$ui/map/my-map-rectangle</a></li><li><a href="module-$ui_map_my-map-scale.html">$ui/map/my-map-scale</a></li><li><a href="module-$ui_map_my-map-scatter.html">$ui/map/my-map-scatter</a></li><li><a href="module-$ui_map_my-map-text.html">$ui/map/my-map-text</a></li><li><a href="module-$ui_map_my-map-track.html">$ui/map/my-map-track</a></li><li><a href="module-$ui_map_my-map-zoom.html">$ui/map/my-map-zoom</a></li><li><a href="module-$ui_map_utils_style.html">$ui/map/utils/style</a><ul class='methods'><li data-type='method'><a href="module-$ui_map_utils_style.html#~parse">parse</a></li></ul></li><li><a href="module-$ui_map_utils_util.html">$ui/map/utils/util</a><ul class='methods'><li data-type='method'><a href="module-$ui_map_utils_util.html#.coordinateEqual">coordinateEqual</a></li><li data-type='method'><a href="module-$ui_map_utils_util.html#.createBezierCurvePoints">createBezierCurvePoints</a></li><li data-type='method'><a href="module-$ui_map_utils_util.html#.createCurvePoints">createCurvePoints</a></li><li data-type='method'><a href="module-$ui_map_utils_util.html#.createLinePathPoints">createLinePathPoints</a></li><li data-type='method'><a href="module-$ui_map_utils_util.html#.factorial">factorial</a></li><li data-type='method'><a href="module-$ui_map_utils_util.html#.geoJsonDecode">geoJsonDecode</a></li><li data-type='method'><a href="module-$ui_map_utils_util.html#.getDistance">getDistance</a></li><li data-type='method'><a href="module-$ui_map_utils_util.html#.mergeProps">mergeProps</a></li><li data-type='method'><a href="module-$ui_map_utils_util.html#.parseDecimal">parseDecimal</a></li><li data-type='method'><a href="module-$ui_map_utils_util.html#.svgToImg">svgToImg</a></li></ul></li></ul><h3>Events</h3><ul><li><a href="module-$ui_map_my-map-cluster.html#~event:change">change</a></li><li><a href="module-$ui_map_my-map-panel.html#~event:close">close</a></li><li><a href="module-$ui_map_my-map-pointer.html#~event:copy">copy</a></li><li><a href="module-$ui_map_my-draw.html#~event:drawend">drawend</a></li><li><a href="module-$ui_map_my-draw.html#~event:drawstart">drawstart</a></li><li><a href="module-$ui_map_my-map-measure.html#~event:end">end</a></li><li><a href="module-$ui_map_my-draw.html#~event:modifyend">modifyend</a></li><li><a href="module-$ui_map_my-draw.html#~event:modifystart">modifystart</a></li><li><a href="global.html#event:on-boxEnd">on-boxEnd</a></li><li><a href="global.html#event:on-boxStart">on-boxStart</a></li><li><a href="global.html#event:on-dragDown">on-dragDown</a></li><li><a href="global.html#event:on-dragMove">on-dragMove</a></li><li><a href="global.html#event:on-dragUp">on-dragUp</a></li><li><a href="module-$ui_map_my-map-geo.html#~event:ready">ready</a></li><li></li></ul><h3>Interfaces</h3><ul><li><a href="module-$ui_map_mixins_feature.methods.drawHandler.html">drawHandler</a></li><li><a href="module-$ui_map_mixins_feature.methods.modifyHandler.html">modifyHandler</a></li></ul><h3>Global</h3><ul><li><a href="global.html#createEzMapLayer">createEzMapLayer</a></li><li><a href="global.html#createFcMapLayer">createFcMapLayer</a></li><li><a href="global.html#createFounderLayer">createFounderLayer</a></li><li><a href="global.html#createLayer">createLayer</a></li><li><a href="global.html#createSuperLayer">createSuperLayer</a></li><li><a href="global.html#createTdtLayer">createTdtLayer</a></li><li><a href="global.html#createTdtLayerGroup">createTdtLayerGroup</a></li><li><a href="global.html#props">props</a></li></ul>
</nav>

<div id="main">
    
    <h1 class="page-title">packages/my-map-marker/Marker.vue</h1>
    

    



    
    <section>
        <article>
            <pre class="prettyprint source linenums"><code>&lt;template>
  &lt;MyMapCluster ref="cluster"
                v-bind="clusterProps"
                :data="markerData"
                :styleCreator="styleCreator"
                :cursor="cursor"
                v-on="$listeners"
                @ready="activePopup(activeIndex)">
    &lt;MyMapPopup v-if="$scopedSlots.default"
                v-show="marker"
                v-bind="popupProps"
                @hide="handleHide">
      &lt;template v-if="$scopedSlots.title" slot="title">
        &lt;slot v-if="marker" name="title" :marker="marker">&lt;/slot>
      &lt;/template>
      &lt;slot v-if="marker" :marker="marker">&lt;/slot>
    &lt;/MyMapPopup>
  &lt;/MyMapCluster>
&lt;/template>

&lt;script>
  /**
   * 标记组件
   * @module $ui/map/my-map-marker
   *
   */
  import MyMapCluster from '../my-map-cluster'
  import MyMapPopup from '../my-map-popup'
  import imageMixin from '../../mixins/image'
  import parseStyle from '../../utils/style'
  import defaultMarkerSrc from '$ui/map/sources/marker/blue.png'
  import {mergeProps} from '../../utils/util'

  // 浮层默认参数
  const defaultPopupProps = {
    title: '信息',
    width: '400px',
    offset: [0, -20],
    autoPan: true
  }


  /**
   * 插槽
   * @member slots
   * @property {string} default 作用域插槽，定义浮层内容，参数：marker 标记的数据
   * @property {string} title 作用域插槽，定义浮层的标题，参数：marker 标记的数据
   */

  export default {
    name: 'MyMapMarker',
    inject: ['myMap'],
    mixins: [imageMixin],
    components: {
      MyMapCluster,
      MyMapPopup
    },
    /**
     * 属性参数, 继承 [$ui/map/packages/my-map-image]{@link module:$ui/map/packages/my-map-image}
     * @member props
     * @property {number[]} [coordinate] 单个标记时的坐标，无设置data时有效
     * @property {string} [src] 标记的默认图片url，data各项属性无src时采用该值
     * @property {array} [data] 批量生成 marker 的数据
     * @property {number[]} [data.coordinate] 批量生成marker时每个marker的坐标
     * @property {string} [data.src] 批量生成marker的展示图片
     * @property {object} [keyMap] 数据属性映射
     * @property {object} [popup] 浮窗的配置参数
     * @property {string} [trigger] popup打开方式 'click', 'hover'
     * @property {boolean} [cluster] 开启聚合
     * @property {number} [distance] 集群距离，表示在这个像素距离内的是同一群marker
     * @property {string} clusterSrc 集图标图片
     */
    props: {
      // 单个标记时的坐标，无设置data时有效
      coordinate: Array,
      // 标记的默认图片url，data各项属性无src时采用该值
      src: {
        type: String,
        default: defaultMarkerSrc
      },
      // 群标记图片url
      clusterSrc: {
        type: String
      },

      // 激活第几个浮层级
      activeIndex: Number,

      // 数据，[{coordinate, src}]
      data: {
        type: Array,
        default() {
          return []
        }
      },
      // 数据属性映射
      keyMap: {
        type: Object,
        default() {
          return {
            coordinate: 'coordinate',
            src: 'src'
          }
        }
      },
      // 开启集群
      cluster: {
        type: Boolean,
        default: true
      },
      // 相距少于的像素距离就是一群
      distance: {
        type: Number,
        default: 20
      },
      zIndex: Number,
      // 浮窗的配置参数
      popup: {
        type: Object,
        default() {
          return defaultPopupProps
        }
      },
      // 浮窗显示触发方式
      trigger: {
        type: String,
        default: 'click',
        validator(val) {
          return ['click', 'hover'].includes(val)
        }
      }

    },
    data() {
      return {
        // 激活时的数据
        marker: null
      }
    },
    computed: {
      markerData() {
        const {coordinate, src} = this.keyMap
        const data = this.data.length > 0
          ? this.data
          : (this.coordinate ? [{coordinate: this.coordinate}] : [])
        return data.map(item => {
          return {
            ...item,
            coordinate: item[coordinate],
            src: item[src]
          }
        })
      },
      clusterProps() {
        return mergeProps(this, ['keyMap', 'distance', 'cluster', 'zIndex'])
      },
      // MyMapImage配置参数
      imageProps() {
        const keys = Object.keys(imageMixin.props)
        return mergeProps(this, keys)
      },
      // MyMapPopup配置参数
      popupProps() {
        if (!this.marker) return null
        const position = this.marker.coordinate
        return {
          ...defaultPopupProps,
          ...this.popup,
          position
        }
      },
      cursor() {
        return this.trigger === 'click'
      }
    },
    watch: {
      activeIndex(val) {
        this.activePopup(val)
      }
    },
    methods: {
      styleCreator(feature) {
        return this.cluster
          ? this.createClusterStyle(feature)
          : this.createFeatureStyle(feature)
      },
      createFeatureStyle(feature, clusterSrc) {
        const data = feature.get('data')
        const {coordinate, src} = data
        const icon = {
          ...this.imageProps,
          coordinate,
          src: clusterSrc || src || this.src
        }
        return parseStyle({icon})
      },
      createClusterStyle(cluster) {
        const features = cluster.get('features')
        return this.createFeatureStyle(features[0], this.clusterSrc)
      },
      activePopup(index) {
        const cluster = this.$refs.cluster
        if (!cluster) return
        const source = cluster.getSource()
        if (!source) return
        const features = source.getFeatures() || []
        const feature = features[index]
        feature &amp;&amp; this.showPopup({}, feature)
      },
      showPopup(e, feature) {
        if (!feature) return
        const coordinate = feature.getGeometry().getCoordinates()
        const features = feature.get('features') || []
        const marker = {
          coordinate,
          cluster: false,
          items: []
        }
        if (features.length > 0) {
          marker.items = features.map(f => f.get('data'))
          marker.cluster = true
        } else {
          marker.items = [feature.get('data')]
        }
        this.marker = marker
        this.$emit('show', this.marker, feature, e)

      },
      handleHide() {
        this.$emit('hide', this.marker)
        this.marker = null

      },
      bindEvents() {
        const cluster = this.$refs.cluster
        switch (this.trigger) {
          case 'click':
            cluster.$on('click', this.showPopup)
            break
          case 'hover':
            cluster.$on('mouseenter', this.showPopup)
            cluster.$on('mouseleave', this.handleHide)
            break
        }
      },
      draw(data = []) {
        const cluster = this.$refs.cluster
        if (cluster) {
          cluster.draw(data)
        }
      },
      clear() {
        const cluster = this.$refs.cluster
        if (cluster) {
          cluster.clear()
        }
      }
    },
    mounted() {
      this.bindEvents()
    },
    beforeDestroy() {
      const cluster = this.$refs.cluster
      if (cluster) {
        cluster.$off()
      }
    }
  }
&lt;/script>


</code></pre>
        </article>
    </section>





    
</div>

<br class="clear">

<footer>
    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.4</a> on Fri May 29 2020 15:27:11 GMT+0800 (GMT+08:00) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
</footer>

<script>prettyPrint();</script>
<script src="scripts/polyfill.js"></script>
<script src="scripts/linenumber.js"></script>




<script>
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "https://hm.baidu.com/hm.js?c4e5f73318b5cb0c389e3d9a05f831cc";
  var s = document.getElementsByTagName("script")[0];
  s.parentNode.insertBefore(hm, s);
})();
</script>

</body>
</html>
